<template>
    <view>
        <view class="detail-container">
            <view class="centers">
                <view class="text1">收费项</view>
                <input type="text" placeholder="输入收费名称" placeholder-class="placeholder-class" :value="consumablesName" maxlength="10" @blur="nameblur" />
            </view>
        </view>
        <view class="detail-container">
            <view class="centers">
                <view class="text1">价格</view>
                <input type="digit" placeholder="输入价格" placeholder-class="placeholder-class" v-model="amount" @input="handlePrice" />
            </view>
        </view>
        <view class="warn-container">
            <text class="warn">温馨提示：助理/耗材收费项是不包含在门店收入25%的，美发师在入驻门店时，能查看服务耗材的明细，在接单服务后，会根据实际消费与门店结算付款。</text>
        </view>
        <view class="savebtn" @tap="onSave">保存</view>
    </view>
</template>

<script>
// pages/order/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            id: '',
            amount: '',
            consumablesName: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var id = options.id;
        var amount = options.amount;
        var consumablesName = options.consumablesName;
        this.setData({
            id: id,
            amount: amount,
            consumablesName: consumablesName
        });
    },
    methods: {
        nameblur: function (e) {
            this.setData({
                consumablesName: e.detail.value
            });
        },

        handlePrice(e) {
            var text = e.detail.value;
            var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;

            if (reg.test(text)) {
                //正则匹配通过，提取有效文本
                text = text.replace(reg, '$2$3$4');
            } else {
                text = '';
            }

            return text;
        },

        onSave: function () {
            let id = this.id;
            let amount = this.amount;
            let consumablesName = this.consumablesName;

            if (!consumablesName) {
                uni.showToast({
                    title: '收费项不能为空',
                    icon: 'none',
                    duration: 2000
                });
                return;
            } else if (!amount) {
                uni.showToast({
                    title: '价格不能为空',
                    icon: 'none',
                    duration: 2000
                });
                return;
            } else {
                const exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                exp.test(amount);
                console.log(exp.test(amount));

                if (!exp.test(amount)) {
                    uni.showToast({
                        title: '请输入正确的金额',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }

                if (amount >= 100000) {
                    uni.showModal({
                        content: '设置不超过5位数',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }

                uni.setStorageSync(
                    'marketadd',
                    JSON.stringify({
                        id: id,
                        consumablesName: consumablesName,
                        amount: amount
                    })
                );
                uni.navigateBack({
                    delta: 0
                });
            }
        }
    }
};
</script>
<style>
.warn-container {
    display: flex;
    flex-direction: column;
}

.detail-container {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 5rpx;
    align-items: center;
}

.placeholder-class {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.text1 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    width: 160rpx;
}

.detail {
    padding-top: 20rpx;
}

.detail > .text1 {
    position: relative;
    top: -72rpx;
}

.savebtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 300rpx 30rpx 0 30rpx;
    position: absolute;
    bottom: 50rpx;
}

.warn {
    font-size: 30rpx;
    letter-spacing: 2px;
    color: #999999;
    font-weight: 500;
    margin: 30rpx;
}

page {
    background-color: #fbfbfb;
}
</style>
